<template>
  <div>
    <div class="mui-numbox" data-numbox-min="1" :data-numbox-max='max'>
      <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
      <!-- 监听文本框的changed事件， 来获取DOM的选择事件 -->
      <input id="test" class="mui-input-numbox" type="number" value="1" ref="nobox" @change="countChanged"/>
      <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
  </div>
</template>

<script>
//  导入mui 从而支持初始化数字框
import mui from "../../lib/mui/js/mui.js";

export default {
  data() {
    return {};
  },
  mounted() {
    //  当组件挂载到页面中之后，取出初始化数字框
    mui(".mui-numbox").numbox();
  },
  methods: {
    countChanged(){
      // 获取商品的选择数量
      const val = this.$refs.nobox.value;
      console.log("数量改变了" + val)
      // 每当 nobox 子组件的 count 值变化时，要立即把最新的值传递给父组件 GoodsInfo.vue 父组件，这样，我们点击【加入购物车】 按钮时，就能把最新的数量值 ，同时交给徽标
      // 这样，就涉及到父子组件传值
      this.$emit('func',parseInt(val))
    }
  },
  props: [
    "max" //接受父组件传递的 库存值 max
  ],
  watch: {
    //    使用场景：监听耽搁虚拟的数据
    max: function(newval, oldval) {
       // console.log(newval + "---" + oldval)
      // 无论外界传递给 nobox 的max值到底是多少；
      //  最终得到的那个数值为我们需要的那个数值
      // 每次点听到max值的改变，无论这个值是否合法，我们都重新为数字框，使用 JS API来手动设置最大值
      mui(".mui-numbox")
        .numbox()
        .setOption("max", newval);
    }
  }
};
</script>

<style lang="scss" scoped>
</style>